<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      class="pullrefresh"
    >
      <van-grid :gutter="12" :column-num="2" class="gridbox">
        <div class="pgoodbox" v-for="(item, index) in pgoodlist" :key="index">
          <div class="pgoodimgbox">
            <img v-lazy="item.pgoodimg" alt="" class="pgoodimg" />
          </div>
          <div class="pgoodinfo">
            <div class="pgoodname">
              {{ item.pgoodname }}
            </div>
            <div class="pgoodprice">
              <van-icon name="points" />{{ item.pgoodprice }}
            </div>
          </div>
        </div>
      </van-grid>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pgoodlist: [
        {
          pgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          pgoodname: "第一件商品",
          pgoodprice: "52",
          pgoodotherimg: [],
          pgooddescription: "",
        },
        {
          pgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          pgoodname: "第二件商品",
          pgoodprice: "52",
          pgoodotherimg: [],
          pgooddescription: "",
        },
        {
          pgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          pgoodname: "第三件商品",
          pgoodprice: "52",
          pgoodotherimg: [],
          pgooddescription: "",
        },
        {
          pgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          pgoodname: "第四件商品第四件商品第四件商品",
          pgoodprice: "52",
          pgoodotherimg: [],
          pgooddescription: "",
        },
        {
          pgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          pgoodname: "第五件商品",
          pgoodprice: "52",
          pgoodotherimg: [],
          pgooddescription: "",
        },
        {
          pgoodimg: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          pgoodname: "第六件商品",
          pgoodprice: "52",
          pgoodotherimg: [],
          pgooddescription: "",
        },
      ],
      isLoading: false,
    };
  },
  methods: {
    filtergoods() {},
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.pullrefresh {
  height: calc(100vh - 250px);
  background-color: #f7f8fa;
  margin: 0 auto;
}
.gridbox {
  justify-content: center;
  padding: 0 !important;
}
.pgoodbox {
  width: 40%;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
}
.pgoodimgbox .pgoodimg {
  width: 100%;
}
.pgoodinfo {
  display: flex;
  flex-direction: column;
}
.pgoodinfo .pgoodname {
  font-size: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
}
.pgoodinfo .pgoodprice {
  font-size: 28px;
  font-weight: 550;
}
</style>